<template>
  <div class="net-work-wrap">
    <div v-for="item in forms" class="form-item">
      <div class="title">{{item.label}}</div>
      <d-form :options="item.options" class="edit-form"/>
      <el-button type="primary" class="submit-button"  :color="formOptions.buttonColor" @click="submitForm(item)">提交</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {reactive, ref, watchEffect} from 'vue'
  import {ElMessage, FormInstance} from "element-plus";
  import {updateConfig} from '@/api/site'
  import {communicationType,configType,targetType} from '@/utils/deviceConfig'
import { watch } from 'vue';

  let props = defineProps({
    options:{            // form的基本配置
      type:Object
    },
    config:{             // 设备配置参数
      type:Object
    },
    params:{
      type:Object,
      default:{
        id:'',            // 站点的id/省份的code
        targetType:'',    // province 省份，device设备
      }         
    }
  });
  let formOptions = props.options;
  const form = reactive({
    mqtt: {communicationType: communicationType['mqtt']},
    ftp: {communicationType: communicationType['ftp']},
    log: {communicationType: communicationType['log']},
    update: {communicationType: communicationType['update']}
  })
 
  watch(
    ()=>props.config,
    (val)=>{
      form.mqtt = Object.assign(form.mqtt,val.mqttConfig)
      form.ftp = Object.assign(form.ftp,val.ftpConfig)
      form.log = Object.assign(form.log,val.ftpLogConfig)
      form.update = Object.assign(form.update,val.updateConfig)
     
    },
    {
      deep:true
    }
  )

  let a = {
    label: '通信形式',
    prop: 'communicationType',
    component: 'd-select',
    options: {
      placeholder: '请选择通信形式',
      style: 'width:180px',
      options: [{
        label: 'MQTT',
        value: 1,
      }, {
        label: 'FTP',
        value: 2,
      }, {
        label: '日志传输',
        value: 3,
      }, {
        label: '软件更新仓库',
        value: 4,
      }]
    },
    rules: {
      required: true,
      message: '请选择通信形式',
      trigger: 'change',
    },
  }
  const mqttOptions = {
    labelWidth: '80px',
    inline: formOptions.inline,
    labelPosition: formOptions.labelPosition,
    formRef: ref<FormInstance>(),
    formClass: formOptions.formClass,
    size: formOptions.size,
    formItems: [
      {
        label: '网络地址',
        prop: 'address',
        component: 'd-input',
        options: {
          placeholder: '请输入ip地址',
          style: 'color:#fff',
        },
        rules: {
          required: true,
          message: '请输入ip地址',
          trigger: 'change',
        },
      },
      {
        label: '网络端口',
        prop: 'port',
        component: 'd-input',
        options: {
          placeholder: '请输入网络端口',
          type: 'number'
        },
        rules: {
          required: true,
          message: '请输入网络端口',
          trigger: 'change',
        },
      },
      {
        label: '用户名',
        prop: 'username',
        component: 'd-input',
        options: {
          placeholder: '请输入用户名',
        },
        rules: {
          required: true,
          message: '请输入用户名',
          trigger: 'change',
        },
      },
      {
        label: '密码',
        prop: 'password',
        component: 'd-input',
        options: {
          placeholder: '请输入密码',
          type: 'password'
        },
        rules: {
          required: true,
          message: '请输入密码',
          trigger: 'change',
        },
      }
    ],
    form: form.mqtt
  }
  const ftpOptions = {
    labelWidth: '80px',
    inline: formOptions.inline,
    labelPosition: formOptions.labelPosition,
    formRef: ref<FormInstance>(),
    formClass: formOptions.formClass,
    size: formOptions.size,
    formItems: [
      {
        label: '网络地址',
        prop: 'address',
        component: 'd-input',
        options: {
          placeholder: '请输入ip地址',
          style: 'color:#fff',
        },
        rules: {
          required: true,
          message: '请输入ip地址',
          trigger: 'change',
        },
      },
      {
        label: '网络端口',
        prop: 'port',
        component: 'd-input',
        options: {
          placeholder: '请输入网络端口',
          type: 'number'
        },
        rules: {
          required: true,
          message: '请输入网络端口',
          trigger: 'change',
        },
      },
      {
        label: '用户名',
        prop: 'username',
        component: 'd-input',
        options: {
          placeholder: '请输入用户名',
        },
        rules: {
          required: true,
          message: '请输入用户名',
          trigger: 'change',
        },
      },
      {
        label: '密码',
        prop: 'password',
        component: 'd-input',
        options: {
          placeholder: '请输入密码',
          type: 'password'
        },
        rules: {
          required: true,
          message: '请输入密码',
          trigger: 'change',
        },
      },
      {
        label: 'ftp路径',
        prop: 'path',
        component: 'd-input',
        options: {
          placeholder: '请输入ftp路径',
        },
        rules: {
          required: true,
          message: '请输入ftp路径',
          trigger: 'change',
        },
      }
    ],
    form: form.ftp
  }
  const logOptions = {
    labelWidth: '80px',
    inline: formOptions.inline,
    labelPosition: formOptions.labelPosition,
    formRef: ref<FormInstance>(),
    formClass: formOptions.formClass,
    size: formOptions.size,
    formItems: [
      {
        label: '网络地址',
        prop: 'address',
        component: 'd-input',
        options: {
          placeholder: '请输入ip地址',
          style: 'color:#fff',
        },
        rules: {
          required: true,
          message: '请输入ip地址',
          trigger: 'change',
        },
      },
      {
        label: '网络端口',
        prop: 'port',
        component: 'd-input',
        options: {
          placeholder: '请输入网络端口',
          type: 'number'
        },
        rules: {
          required: true,
          message: '请输入网络端口',
          trigger: 'change',
        },
      },
      {
        label: '用户名',
        prop: 'username',
        component: 'd-input',
        options: {
          placeholder: '请输入用户名',
        },
        rules: {
          required: true,
          message: '请输入用户名',
          trigger: 'change',
        },
      },
      {
        label: '密码',
        prop: 'password',
        component: 'd-input',
        options: {
          placeholder: '请输入密码',
          type: 'password'
        },
        rules: {
          required: true,
          message: '请输入密码',
          trigger: 'change',
        },
      },
      {
        label: 'ftp路径',
        prop: 'path',
        component: 'd-input',
        options: {
          placeholder: '请输入ftp路径',
        },
        rules: {
          required: true,
          message: '请输入ftp路径',
          trigger: 'change',
        },
      }
    ],
    form: form.log
  }
  const updateOptions = {
    labelWidth: '80px',
    inline: formOptions.inline,
    labelPosition: formOptions.labelPosition,
    formRef: ref<FormInstance>(),
    formClass: formOptions.formClass,
    size: formOptions.size,
    formItems: [
      {
        label: '网络地址',
        prop: 'address',
        component: 'd-input',
        options: {
          placeholder: '请输入ip地址',
          style: 'color:#fff',
        },
        rules: {
          required: true,
          message: '请输入ip地址',
          trigger: 'change',
        },
      },
      {
        label: '网络端口',
        prop: 'port',
        component: 'd-input',
        options: {
          placeholder: '请输入网络端口',
          type: 'number'
        },
        rules: {
          required: true,
          message: '请输入网络端口',
          trigger: 'change',
        },
      },
    ],
    form: form.update
  }
  const forms = [
    {
      label: 'MQTT服务器配置',
      value:'mqttConfig',
      options: mqttOptions
    },
    {
      label: 'FTP服务器配置',
      value:'ftpConfig',
      options: ftpOptions
    },
    {
      label: '日志FTP服务器配置',
      value:'ftpLogConfig',
      options: logOptions
    },
    {
      label: '更新服务器配置',
      value:'updateConfig',
      options: updateOptions
    }
  ]
  const submitForm = async ({value,options}) => {
    let formEl = options.formRef?.value;
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        updateData(value,options.form)
      }
    })
  }

  type paramsType = {
    configType:number,
    id:string,
    targetType:string,
    [propName:string]:any,
  }
  const updateData = (configName,data)=>{
    let params:paramsType = {
      configType:configType['network'],
      id:props.params.id,
      targetType:targetType[props.params.targetType],
      network: {
        [configName] : data,
        communicationType:data.communicationType
      }
    }
    updateConfig(params).then(res=>{
      ElMessage.success('更新成功！')
    })
  }
  //
  // const resetForm = () => {
  //   let formEl = options.formRef?.value;
  //   if (!formEl) return
  //   formEl.resetFields()
  // }
  //
  // watchEffect(() => {
  //   console.log(form.test5)
  // })
</script>
<style lang="scss" scoped>
.net-work-wrap{
  .form-item{
    .submit-button{
      width: 100%;
      margin-left:0;
    }
  }
 
}

</style>